<template>
	<view class="container">
		<uni-forms ref="form" :rules="valiRules" :modelValue="formData">
			<slot name="headSolt"></slot>
			<block v-for="groupItem in groupList" :key="groupItem.groupKey">
				<uni-section class="titleBox" v-if="groupItem.isShow" :title="groupItem.groupTxt" type="line">
					<block v-for="(item,index) in formItemList" :key="index">
						<uni-forms-item v-if='item.type==="input"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-easyinput @change='inputChange($event,item.key)' :trim='trim'
								v-model="formData[item.key]" :disabled='item.readOnly'
								:placeholder='`请输入${item.label}`' />
						</uni-forms-item>
						<uni-forms-item
							v-if='item.type==="numberInput"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-easyinput @change='inputChange($event,item.key)' :trim='trim' type="number"
								v-model="formData[item.key]" :disabled='item.readOnly'
								:placeholder='`请输入${item.label}`' />
						</uni-forms-item>
						<uni-forms-item v-if='item.type==="number"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-number-box v-model="formData[item.key]" :disabled='item.readOnly'
								:placeholder='`请输入${item.label}`' :step='item.step' />
						</uni-forms-item>
						<uni-forms-item v-if='item.type==="textarea"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-easyinput @change='inputChange($event,item.key)' :trim='trim' type="textarea"
								v-model="formData[item.key]" :disabled='item.readOnly'
								:placeholder='`请输入${item.label}`' />
						</uni-forms-item>
						<uni-forms-item
							v-if='item.type==="inputSelect"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<inputSelect v-model="formData[item.key]" :localdata="item.items"
								@remoteSearch='remoteSearch(item.key,item.items,index,$event)'
								@change="selectInputChange($event,item.key)" :disabled='item.readOnly'
								:placeholder="`请选择${item.label}`">
							</inputSelect>
						</uni-forms-item>
						<uni-forms-item v-if='item.type==="select"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-data-select v-model="formData[item.key]" :localdata="item.items"
								@change="selectChange($event,item.key)"
								:placeholder="`请选择${item.label}`"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item
							v-if='item.type==="jointSelect"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-data-picker :placeholder="`请选择${item.label}`" :popup-title="`请选择${item.label}`"
								:localdata="item.items" v-model="formData[item.key]"
								@change="selectChange($event,item.key)" @nodeclick="onNodeClick"
								@popupopened="onPopupOpened" @popupclosed="onPopupOpened">
							</uni-data-picker>
						</uni-forms-item>
						<uni-forms-item v-if='item.type==="checkbox"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-data-checkbox :mode="item.mode?item.mode:'default'" v-model="formData[item.key]"
								@change="checkoutChange($event,item.key)" :disabled='item.readOnly'
								:localdata="item.items" />
						</uni-forms-item>
						<uni-forms-item
							v-if='item.type==="checkboxMultiple"&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-data-checkbox v-model="formData[item.key]"
								@change="checkoutListChange($event,item.key)" multiple :disabled='item.readOnly'
								:localdata="item.items" />
						</uni-forms-item>
						<uni-forms-item
							v-if='(item.type==="date" || item.type==="daterange"|| item.type==="datetime"|| item.type==="datetimerange")&&item.isShow && item.group === groupItem.groupKey'
							:label-width='labelWidth' :label-align='labelAlign' :label="item.label"
							:required='item.required' :name="item.key">
							<uni-datetime-picker :hide-second="item.hideSecond" :return-type="item.format"
								:type="item.type" :disabled='item.readOnly' v-model="formData[item.key]" />
						</uni-forms-item>
						<slot :name="item.key"></slot>
					</block>
				</uni-section>
			</block>
			<slot name="footSolt"></slot>
		</uni-forms>
		<view class="baseBatton">
			<u-button :type="btnType" @click="submit" :style="{width: btnWidth + '%'}" :size="btnSize"
				:text="btnText"></u-button>
			<slot name="footButton"></slot>
		</view>
	</view>
</template>

<script>
	import inputSelect from '@/components/input-select.vue'
	export default {
		components: {
			inputSelect
		},
		data() {
			return {
				formData: {}
			}
		},
		props: {
			pageFormData: {
				type: Object,
				default: function() {
					return {}
				}
			},
			formItemList: {
				type: Array,
				default: function() {
					return []
				}
			},
			groupList: {
				type: Array,
				default: function() {
					return [{
						groupKey: 'info',
						groupTxt: '信息',
						isShow: true
					}, ]
				}
			},
			btnText: {
				type: String,
				default: '提交'
			},
			btnSize: {
				type: String,
				default: 'normal' // large / mini
			},
			btnWidth: {
				type: Number,
				default: 100 // large / mini
			},
			btnType: {
				type: String,
				default: 'primary' // large / mini
			},
			labelWidth: {
				type: Number,
				default: 80
			},
			labelAlign: {
				type: String,
				default: 'left'
			},
			trim: {
				type: Boolean,
				default: true
			},
		},
		mounted() {},
		computed: {
			// i18n() {
			// 	return this.$t('global')
			// },
			// 校验规则
			valiRules() {
				let rules = {}
				this.formItemList.forEach(item => {
					if (item.required) {
						if (item.type === 'numberInput' || item.type === 'number') {
							rules[item.key] = {
								rules: [{
										required: true,
										errorMessage: `${item.label}不能为空`
									},
									{
										validateFunction: function(rule, value, data, callback) {
											if (value <= 0) {
												callback('数值需大于0')
											}
											return true
										}
									}
								]
							}
						} else {
							rules[item.key] = {
								rules: [{
									required: true,
									errorMessage: item.type === 'input' || item.type === 'textarea' ||
										item.type === 'numberInput' ? `${item.label}不能为空` :
										`请选择${item.label}`
								}]
							}
						}
					}
				})
				return rules
			}
		},
		created() {
			this.initFormData()
		},
		watch: {},
		methods: {
			resetFormData() {
				setTimeout(() => {
					Object.keys(this.formData).forEach(key => this.formData[key] = null)
				}, 0)
			},
			
			onNodeClick(e) {
				console.log('节点被点击');
			},
			
			onPopupOpened(e) {
				console.log('弹出层弹出');
			},
			
			onpopupClosed(e) {
				console.log('弹出层弹出');
			},
			
			setSelectItems(key, items) {
				let index = this.formItemList.findIndex((e) => {
					return e.key === key
				})
				if (index > -1 && items.length > 0) {
					this.formItemList[index].items = items
				} else {
					this.formItemList[index].items = []
				}
			},
			
			initFormData() {
				if (Object.keys(this.pageFormData).length === 0) {
					this.formData = this.$initFormData(this.formItemList)
				} else {
					this.formData = this.pageFormData
				}
			},
			
			checkoutListChange(e, key) {
				console.log('多选====> key', key)
				console.log('多选====> e', e)
				this.$emit('checkoutListChange', e, key)
			},

			checkoutChange(e, key) {
				console.log('单选====> key', key)
				console.log('单选====>e', e)
				this.$emit('checkoutChange', e, key)
			},

			remoteSearch(key, items, index, val) {
				console.log('remoteSearch====> key', key)
				console.log('remoteSearch====> items', items)
				console.log('remoteSearch====> index', index)
				console.log('remoteSearch====> val', val)
				this.$emit('remoteSearch', key, items, index, val)
			},

			selectInputChange(e, key) {
				console.log('selectInputChange====> key', key)
				console.log('selectInputChange====> e', e)
				this.$emit('selectInputChange', e, key)
			},

			inputChange(e, key) {
				console.log('inputSelect====> key', key)
				console.log('inputSelect====> e', e)
				this.$emit('inputChange', e, key)
			},

			selectChange(e, key) {
				console.log('select====> key', key)
				console.log('select====> e', e)
				this.$emit('selectChange', e, key)
			},

			submit() {
				this.$refs['form'].validate().then(res => {
					console.log('submit====> res', res)
					this.$emit('submit', this.formData)
				}).catch(err => {
					// console.log('submit====> err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.baseBatton {
		padding: 1rem;
		position: fixed;
		width: 100%;
		min-height: 5rem;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
		align-items: center;
	}

	::v-deep .uni-easyinput__content {
		border: none;
		border-bottom: 2rpx solid #dcdfe6;
	}

	::v-deep .uni-select {
		border: none;
		border-bottom: 2rpx solid #dcdfe6;
	}

	::v-deep .input-value {
		border: none;
		border-bottom: 2rpx solid #dcdfe6;
	}

	::v-deep .uni-date-x--border {
		border: none;
	}

	::v-deep .uni-date-editor {
		border: none;
		border-bottom: 2rpx solid #dcdfe6;
	}

	::v-deep .uni-section {
		margin-bottom: 1rem;
		padding: 0 0.5rem 0.5rem;
		// border-radius: 1rem;
		background-color: #fff;

		.uni-forms-item {
			flex-wrap: wrap;

			.uni-forms-item__label {
				color: #333;
				height: 100% !important;
				width: 100% !important;
			}
		}
	}

	::v-deep .uni-numbox {
		height: 100%;

		.uni-numbox__value {
			box-sizing: border-box;
			width: 100% !important;
			height: 100%;
			border: 1px solid #eee;
			background-color: #fff;
		}
	}

	::v-deep .uni-forms-item {
		margin-bottom: 34rpx;
	}

	.titleBox {
		&> ::v-deep .uni-section-header {
			padding: 24rpx 0;
		}
	}

	::v-deep {
		.uni-forms-item {
			padding: 0 1rem;
		}
	}

	.container {
		padding-bottom: 6rem;
	}
</style>